<template>
    <mi-list-page>

        <mi-table :list="list">
            <template #topBar>
                <mi-top-bar :data="topToolbar" />
            </template>

            <template #full="{row}">
                <span>{{row.area_title}} {{row.address}}</span>
            </template>
        </mi-table>

    </mi-list-page>
</template>


<script setup lang="ts">
import {nextTick, provide, reactive, ref} from "vue";
import {makeModelAuth} from "@/utils/auth";
import global from "@/dict/global";
import List from "@/model/list";
import Edit from "@/model/edit";
import {useRouter} from "vue-router";


const tdWidth = global.tdWidth
const auth = makeModelAuth('site.diyPage')
const router = useRouter()
// toolbar 事件
const topToolbar = [
    {
        auth: auth.add,
        type: 'success',
        icon: 'Plus',
        title: '新增',
        event: (ids:Array<number>) => {
            const url = router.resolve({path:'/diy/edit'})
            window.open(url.href, '_blank')
        }
    },
    {
        auth: auth.del,
        title: '删除',
        type: 'danger',
        icon: 'Delete',
        event: (ids:Array<number>) => {
            list.del({
                url: `/${auth.del}`,
                ids: ids
            })
        }
    },
]

const lineToolbar = [
    {
        auth: auth.edit, title: '编辑', event: (row:any) => {
            const url = router.resolve({path:`/diy/index/edit/${row.id}`})
            window.open(url.href, '_blank')
        }
    },
    {
        auth: auth.del, title: '删除', event: (row:any) => {
            list.del({
                url:`/${auth.del}`,
                ids: [row.id]
            })
        }
    },
]

const list = reactive(new List({
    where: {},
    url: `/${auth.index}`,
    columns:[
        {name: "id", type:'selection'},
        {name: "title", title: "标题"},
        // {name: "status", title: "状态", width: tdWidth.switch, type:"switch", align: "center"},
        {name: "create_time", title: "添加时间", width: tdWidth.min, sort:true,},
        {name: "update_time", title: "更新时间", width: tdWidth.min, sort:true,},
        {title: "操作", type:'toolbar',toolbar:lineToolbar},
    ]
}))

const edit = reactive(new Edit({}))

provide("list", list)
provide("edit", edit)



</script>

<style scoped>

</style>
